<template>
	<view class="page-login">
		<image class="image" src="@/static/image/bg_logo.png"></image>
		<view class="body">
			<view class="f-row-Wcenter"><span class="span-title">威店老板助手</span></view>
			<uni-forms id="uni-forms" ref="form" :value="Params" :rules="rules" style="margin-top: 100upx;">
				<view class="f-column f-column-end forms-item">
					<uni-forms-item name="softid">
						<view class="f-row-Hcenter">
							<label class="icons iconqiyezhanghao1" style="color: #F1F1F1;"></label>
							<uni-easyinput :style="{ color: '#f1f1f1' }" :inputBorder="false" type="text" v-model="Params.softid" placeholder="请输入企业账号" />
						</view>
					</uni-forms-item>
				</view>

				<view class="f-column f-column-end forms-item">
					<uni-forms-item name="oper_no">
						<view class="f-row-Hcenter">
							<label class="icons iconbianhao" style="color: #F1F1F1;"></label>
							<!-- @input="binddata('oper_no', $event)" -->
							<uni-easyinput :style="{ color: '#f1f1f1' }" :inputBorder="false" type="text" v-model="Params.oper_no" placeholder="请输入操作员编号" />
						</view>
					</uni-forms-item>
				</view>
				<view class="f-column f-column-end forms-item">
					<uni-forms-item name="oper_pw">
						<view class="f-row-Hcenter">
							<label class="icons iconmima1" style="color: #F1F1F1;"></label>
							<uni-easyinput :style="{ color: '#f1f1f1' }" :inputBorder="false" type="password" v-model="Params.oper_pw" placeholder="请输入操作员密码" />
						</view>
					</uni-forms-item>
				</view>
				<button class="button-login" @click="onLogin">登录绑定</button>
				<!--  #ifdef MP -->
				<button class="button-wxLogin" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">微信授权登录</button>
				<!--  #endif -->
				<!--  #ifndef MP -->
				<image src="@/static/logo.png"  class="button-wxLogin" mode="aspectFill" @tap="getuserinfo"></image>
				<!--  #endif -->
			</uni-forms>
		</view>
		<view class="footer f-row-Wcenter" style="width: 100%;z-index: 3;"><span>深圳市智百威科技发展有限公司</span></view>
	</view>
</template>

<script>
import api_server from '@/api/api_server.js';
export default {
	data() {
		return {
			userInfo: null,
			isShowDatePicker: true,

			formData: {
				cmd: 'AppLogin',
				version: '1.0',
				token: '8848',
				pageNo: 0,
				onePageNum: 10
			},
			Params: {
				usertype: 0,
				softid: '884821',
				oper_no: '1001',
				oper_pw: '987654',
				clientflag: 0
			},
			rules: {
				softid: {
					rules: [ 
						{
							required: true,
							errorMessage: '请输入企业账号'
						},
						{
							minLength: 3,
							maxLength: 11,
							errorMessage: '企业账号长度在 {minLength} 到 {maxLength} 个字符'
						}
					]
				},
				oper_no: {
					rules: [
						{
							required: true,
							errorMessage: '请输入操作员编号!'
						},
						{
							minLength: 3,
							maxLength: 11,
							errorMessage: '编号长度在 {minLength} 到 {maxLength} 个字符'
						}
					]
				},
				oper_pw: {
					rules: [
						{
							required: true,
							errorMessage: '请输入密码'
						}
					]
				}
			}
		};
	},

	onShow() {},
	onLoad() {
		
	},
	methods: {
		/**
		 * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
		 * @param {String} name 字段名称
		 * @param {String} value 表单域的值
		 */
		binddata(name, value) {
			//通过 input 事件设置表单指定 name 的值
			console.log('通过 input 事件设置表单指定 name 的值', name, value);
			this.$refs.form.setValue(name, value);
		},
		changeBack: function(d) {
			console.log(d);
		},
		// 触发提交表单
		onLogin() {
			console.log('dwzy_AppLogin', this.formData);
			this.$refs.form
				.submit()
				.then(res => {
					this.formData.Params = this.Params;
					uni.showLoading({
					    title: '加载中'
					});
					api_server.dwzy_AppLogin({
						data: this.formData,
						method: 'post',
						timeout: 5000,
						success: res => {
							 uni.hideLoading();
							this.$store.commit('setUserInfo', res.data.data);
							//不是登录而提示 token校验
							
							if (res.data.result != 0) {
								uni.showModal({
									title: res.data.resultNote,
									content: JSON.stringify(res),
									confirmText: '返回登录',
									success: function(res) {
										if (res.confirm) {
											
										}
									}
								});
							}else{
								this.$util.redirectTo({
									url: '/pages/tab2/index'
								});
							}
							
						},
						fail(error) {
							console.log('error', error);
							uni.showModal({
								title: '登录失败',
								content: JSON.stringify(error),
								confirmText: '确定',
								success: function(res) {
									if (res.confirm) {
										
									}
								}
							});
							 uni.hideLoading();
						}
					});
				})
				.catch(err => {
					console.log('表单错误信息：', err);
				});
		},
		getuserinfo() {
			uni.login({
			  	provider: 'weixin',
			  	success: loginRes => {
			  		// console.log('1', loginRes);
			  		// 获取用户信息
			  		uni.getUserInfo({
			  			provider: 'weixin',
			  			success: loginRe => {
			  				// console.log('用户昵称为2：', loginRe);
							 if(loginRe.userInfo){
								this.$store.commit('setUserInfo', {wxUser:loginRe.userInfo});
								this.$util.redirectTo({
									url: '/pages/tab2/index'
								});
							}
			  			},
			  			fail: fail => {
			  				console.log('fail3：', fail);
			  			}
			  		});
			  	},
			  	fail: fail3 => {
			  		console.log('fail4：', fail3);
			  	}
			}); 
		}
	}
};
</script>

<style lang="scss">
.Hcenter {
	top: 0upx;
	bottom: 0upx;
	margin: 0 auto;
}
.page-login {
	// calc(100vh - xxpx)
	height: 100vh;
	position: relative;
	.image {
		position: absolute;
		width: 100%;
		height: 100%;
	}
}
.body {
	position: absolute;
	width: 100%;
	z-index: 2;
	padding: 0 40upx;
	.span-title {
		margin-top: 250upx;
		font-weight: 800;
		font-size: 70upx;
		color: #f1f1f1;
	}

	#uni-forms {
		margin-top: 300upx;
		.forms-item {
			height: 113upx;
			border-bottom: 2upx #1cbbb4 solid;
			.uni-forms-item {
				background-color: rgba(0, 0, 0, 0);
				margin-bottom: 0upx;
				font-size: 90upx;
				label{
					&:nth-of-type(1){
						font-size: 90upx;
					}
				}
				uni-easyinput{
					width: 100%;
				}
				.uni-forms-item__inner {
					.uni-forms-item__content {
						min-height: 0upx;
						// H5 下input颜色改变不了
						// .f-row-Hcenter {
						// 	.uni-easyinput {
						// 		.uni-easyinput__content {
						// 			.uni-easyinput__content-input {
						// 				.uni-input-wrapper {
						// 					.uni-input-input {
						// 						color: #f1f1f1;
						// 					}
						// 				}
						// 			}
						// 		}
						// 	}
						// }
					}
				}
				.uni-easyinput__content-input {
					color: #f1f1f1;
				}
			}
		}

		.forms-item:nth-of-type(3) {
			margin-bottom: 120upx;
		}

		.button-login {
			width: 100%;
			height: 80upx;
			border-radius: 100upx;
			background-color: #1cbbb4;
			color: #cce6ff;
			margin-bottom: 40upx;
		}
		.button-wxLogin {
			width: 100%;
			height: 80upx;
			border-radius: 100upx;
			background-color: #39b54a;
			color: #cce6ff;
		}
	}
}
.footer {
	position: absolute;
	bottom: 104upx;
	span {
		height: 23upx;
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #8bafc9;
		line-height: 125upx;
	}
}
</style>
